<script setup lang="ts">
import { defineAsyncComponent, shallowReactive, watch, onBeforeUnmount } from 'vue';

const props: any = defineProps<{
    ujt: any;
    ty: number;
}>();

const { $model, $fn, $global } = props.ujt;

const rfCur: any = shallowReactive({ comp: null });

// 方法：基于挂载好的views里面组件，动态获取路由对应的组件
$fn.getcomp = (comp: string) => {
    try {
        try {
            return defineAsyncComponent($model.comps[`./${comp}.vue`]);
        } catch (err: any) {
            if (comp && comp.endsWith('/default')) {
                return defineAsyncComponent($model.comps[`./${comp.slice(0, -8)}.vue`]);
            } else {
                return defineAsyncComponent(() => import('../../../views/asai.vue'));
            }
        }
    } catch (err: any) {
        return defineAsyncComponent(() => import('../../../views/asai.vue'));
    }
};

const compWatch: any = watch(
    () => $global.location.comps[props.ty],
    (newVal: any, oldVal: any) => {
        if (newVal && newVal !== oldVal) {
            rfCur.comp = $fn.getcomp(newVal);
        }
    },
    { immediate: true }
);

onBeforeUnmount(() => {
    compWatch && compWatch();
});
</script>

<template>
    <component :ujt="ujt" :is="rfCur.comp"></component>
</template>

<style scoped lang="scss"></style>
